<template>
  <n-config-provider :theme="theme.box">
    <NLayout position="absolute">
      <NLayoutHeader style="height: 64px; padding: 4px" bordered>
        <NFlex style="height: 100%; align-items: center">
          <h1>🌍 Space AirGIS 地理空间引擎</h1>
          <NFlex
            style="
              flex: 1;
              padding-right: 20px;
              justify-content: flex-end !important;
              align-items: center;
            "
          >
            <NButton quaternary circle @click="() => runCodeFun()">
              <template #icon>
                <NIcon :component="CaretForward" size="32" color="#0e7a0d" />
              </template>
            </NButton>

            <NSwitch v-model:value="active" size="medium">
              <template #checked-icon>
                <n-icon :component="MoonOutline" />
              </template>
              <template #unchecked-icon>
                <NIcon :component="SunnyOutline" />
              </template>
            </NSwitch>
          </NFlex>
        </NFlex>
      </NLayoutHeader>
      <NLayout has-sider position="absolute" style="top: 64px; bottom: 186px">
        <NSplit>
          <template #1>
            <NLayout style="width: 100%; height: 100%">
              <Editor
                :code="currentCode.template"
                :theme="theme.codeTheme"
                :getEditor="getEditor"
              ></Editor>
            </NLayout>
          </template>

          <template #2>
            <NLayout style="width: 100%; height: 100%">
              <Preview
                :code="currentCode.template"
                :runCode="runCode"
              ></Preview>
            </NLayout>
          </template>
        </NSplit>
      </NLayout>
      <NLayoutFooter
        bordered
        position="absolute"
        style="height: 186px; padding: 6px"
      >
        <ExampleList></ExampleList>>
      </NLayoutFooter>
    </NLayout>
  </n-config-provider>
</template>
<script setup lang="ts">
import {
  NFlex,
  NIcon,
  NLayout,
  NLayoutFooter,
  NLayoutHeader,
  NSplit,
  NSwitch,
  NConfigProvider,
  darkTheme,
  NButton,
} from "naive-ui";
import Editor from "../components/Editor.vue";
import ExampleList from "../components/ExampleList.vue";
import Preview from "../components/Preview.vue";
import { MoonOutline, SunnyOutline, CaretForward } from "@vicons/ionicons5";
import { ref, watch } from "vue";
import type { BuiltInGlobalTheme } from "naive-ui/es/themes/interface";
import type { IExample } from "../examples/types";
import { helloword } from "../examples";

const active = ref(false);
let editor: any = null;
const currentCode = ref<IExample>(helloword);

const runCode = ref(0);
const runCodeFun = () => {
  currentCode.value.template = editor.getValue();

  runCode.value++;
};

const getEditor = (_editor: any) => {
  editor = _editor;
};
watch(active, () => {
  if (active.value) {
    theme.value = {
      box: darkTheme,
      codeTheme: "vs-dark",
    };
  } else {
    theme.value = {
      box: undefined,
      codeTheme: "vs",
    };
  }
});

const theme = ref<{
  box: BuiltInGlobalTheme | undefined;
  codeTheme: "vs" | "vs-dark";
}>({
  box: undefined,
  codeTheme: "vs",
});
</script>
<style lang="scss"></style>
